<template>
    <div>
        <goodsHead :navArr="navArr" :index1.sync="index1" :nb="nb" :flag.sync="flag"></goodsHead>
        <div class="nav">
            <div class="navbox" v-for="(v, index) in navArr" :key="index" @click="changeFlag(index)">
                <div class="box1">
                    <img :src="v.img" alt="">
                    <div class="guanzhu" :class="{guanzhu1:flag==index}">+关注</div>
                </div>
                <span>{{v.msg}}</span>
            </div>
        </div>
        <component :is="navArr[index1].com"></component>
    </div>
</template>

<script>
import goodsHead from '../Goods/goodsHead.vue';
import goods1 from '../Goods/goods1.vue'
import goods2 from '../Goods/goods2.vue'
import goods3 from '../Goods/goods3.vue'
import goods4 from '../Goods/goods4.vue'
export default {
    data(){
        return{
            navArr:[
                { img:"https://gw.alicdn.com/imgextra/TB1o_LNG.Y1gK0jSZFMSuuWcVXa.jpg_140x10000Q75.jpg_.webp",msg:"好货精选",com:"goods1"},
                { img: "https://gw.alicdn.com/imgextra/O1CN01OI03UI1g76AkDto39_!!6000000004094-0-yinhe.jpg_140x10000Q75.jpg_.webp", msg: "618精选", com: "goods2" },
                { img: "https://gw.alicdn.com/imgextra/O1CN01UW8EeV26gzDEFzwYJ_!!6000000007692-0-yinhe.jpg_140x10000Q75.jpg_.webp", msg: "精致生活家", com: "goods3" },
                { img: "https://gw.alicdn.com/imgextra/TB12g2iOxYaK1RjSZFnSuu80pXa.jpg_140x10000Q75.jpg_.webp", msg: "厨艺小能手", com: "goods4" },
            ],
            flag:0,
            index1:0,
            nb:"",
           
        }
    },
    components:{
        goodsHead,
        goods1,
        goods2,
        goods3,
        goods4,
    },
    methods:{
        changeFlag(index){
            this.flag=index
            this.index1=index
        }
    },
    mounted(){
        window.onscroll = () => {
            if (document.documentElement.scrollTop > 75) {
                this.nb = "nb"

            } else {
                this.nb = ""
            }
        }

    }
}
</script>

<style scoped>
.nav{
    width: 100%;
    height: 126px;
    background: #22aafe;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.nav .navbox{
width: 25%;
height: 126px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.navbox .box1{
    width: 71.4px;
    height: 71.4px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 15px;
    position: relative;
}
.guanzhu{
    width: 48px;
    height: 20px;
    color: #fff;
    font-size: 12px;
    position: absolute;
    bottom: -10px;
    background: #2792f2;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    display: none;
}
.guanzhu1{
    display: block;
}
.box1 img{
    width: 59.1px;
    height: 59.1px;
}
.navbox>span{
    color: #fff;
    font-size: 13px;
    margin-top: 7px;
    font-weight: bolder;
}
</style>